import React, { memo, useCallback, useEffect, useRef } from 'react'
import { useSelector, shallowEqual, useDispatch } from 'react-redux'

import { getRcmNewAlbumAction } from '../../store/actionCreators'

import WYThemeHeaderRCM from '@/components/theme-header-rcm'
import WYAlbumCover from '@/components/album-cover'

import { useHistory } from 'react-router-dom'

import { Carousel } from 'antd';

import { AlbumWrapper } from './style'

export default memo(function NewAlbum() {

  const state = useSelector(state => {
    return {
      album: state.getIn(["recommend", "newAlbum"])
    }
  }, shallowEqual)

  const caroRef = useRef()
  const dispatch = useDispatch()
  const history = useHistory()

  const keywordClick = useCallback((keyword) => {
    history.push({
      pathname: "/discover/songs",
      cat: keyword
    })
  }, [history])

  useEffect(() => {
    dispatch(getRcmNewAlbumAction({
      limit: 10
    }))
  }, [dispatch])

  return (
    <AlbumWrapper>
      <WYThemeHeaderRCM
        title="新碟上架"
        moreLink="/discover/songs"
        keywordClick={keywordClick}
      ></WYThemeHeaderRCM>
      <div className="content">
        <div className="btn btn-left sprite_02"
          onClick={e => caroRef.current.prev()}
        ></div>
        <div className="album">
          <Carousel dots={false} ref={caroRef}>
            {
              [0, 1].map(item => {
                return (
                  <div key={item} className="page">
                    {
                      state.album.slice(item*5, (item+1)*5).map((item1, index1) => {
                        return (
                          <WYAlbumCover className="album-cover"
                            info={item1} size="100" width="125" bgp="-570" key={index1}
                            ></WYAlbumCover>
                          )
                        })
                      }
                  </div>
                )
              })
            }
          </Carousel>
        </div>
        <div className="btn btn-right sprite_02"
          onClick={e => caroRef.current.next()}
        ></div>
      </div>
    </AlbumWrapper>
  )
})